<template>
    <div style="display: flex;">
        <a-form
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            style="width: 500px; margin-top: 30px;"
        >
            <a-form-item
                label="剧本名"
                name="name"
            >
                <div>{{name}}</div>
            </a-form-item>
            <a-form-item
                label="剧本描述"
                name="description"
                :rules="[{ required: true, message: '请输入剧本名称' }]"
            >
                <a-textarea v-model:value="description" disabled show-count />
            </a-form-item>
            <a-form-item label="标签" name="labelIds">
                <a-select
                    v-model:value="labelsSelected"
                    mode="multiple"
                    style="width: 100%"
                    placeholder="选择标签"
                    disabled
                >
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" size="large" @click="collectionClicked">{{collectionButton}}</a-button>
            </a-form-item>
        </a-form>
        <PDF
            page-scale="page-fit"
            :width="1000"
            :height="800"
            style="margin-left: 100px; margin-top: 30px;"
            theme="dark"
            :src="content"
            @loaded="onLoaded" />
    </div>
</template>

<script lang="ts">
import PDF from '../common/pdf.vue'
import { message } from 'ant-design-vue';
export default {
    name: 'ScriptsDetail',
    components: {
        PDF
    }
}
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { getScriptById, collectScript, deleteCollection } from'@/api/scripts_api'

const props = defineProps(['id', 'collection'])
const name = ref<string>('')
const description = ref<string>('')
const labelsSelected = ref<string[]>([])
const content = ref<string>('')
const collectionButton = ref<string>('')
const collectionFlag = ref<boolean>(false)

onMounted(async () => {
  // 请求script数据
  await getScriptById(props.id)
  .then(resp => {
    name.value = resp.data.name
    description.value = resp.data.description
    labelsSelected.value = resp.data.labelNames
    content.value = resp.data.contentUrl
  })
  .catch(errpr => {})
  collectionFlag.value = props.collection
  if (collectionFlag.value == true) {
    collectionButton.value = "解除收藏"
  } else {
    collectionButton.value = "收藏"
  }
});

function onLoaded (pdfApp: any) {
  console.log('loaded app:', pdfApp)
}

async function collectionClicked() {
    if (collectionFlag.value == true) {
        await deleteCollection(props.id)
        .then(resp => {
            message.info("解除收藏成功!")
            collectionButton.value = "收藏"
            collectionFlag.value = false
        })
        .catch(error => {})
    } else {
        await collectScript(props.id)
        .then(resp => {
            message.info("收藏成功!")
            collectionButton.value = "解除收藏"
            collectionFlag.value = true
        })
        .catch(error => {})
    }
}

</script>